import React, { useState } from 'react';
import { Button, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import styles from './index.less';

interface HeaderProps {
  onModelChange: (model: string) => void;
}

//设置左面板的header，用于切换模型
const Header: React.FC<HeaderProps> = ({ onModelChange }) => {
  const [currentModel, setCurrentModel] = useState<string>('portraitStyle');

  const items: MenuProps['items'] = [
    {
      key: 'portraitStyle',
      label: '人像风格重绘',
    },
    {
      key: 'text2img',
      label: '文本生成图像',
    },
  ];

  const getModelTitle = (model: string) => {
    switch (model) {
      case 'portraitStyle':
        return '人像风格重绘';
      case 'text2img':
        return '文本生成图像';
      default:
        return '';
    }
  };

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    onModelChange(key);
    setCurrentModel(key);
  };

  return (
    <div className={styles.header}>
      <div className={styles.title}>
        {getModelTitle(currentModel)}
      </div>
      <Dropdown
        menu={{
          items,
          onClick: handleMenuClick,
          selectedKeys: [currentModel],
        }}
        trigger={['click']}
        placement="bottomRight"
      >
        <Button
          type="text"
          icon={<SwapOutlined />}
          className={styles.switchButton}
          style={{
            fontSize: '12px',
          }}
        >
          切换
        </Button>
      </Dropdown>
    </div>
  );
};

export default Header; 